<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="main-header">
        <p>{{ form.id ? '编辑产品' : '新建产品' }}</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="top" class="rule-form">
        <el-form-item prop="img" class="form-img">
          <el-upload :limit="1" :show-file-list="false" :auto-upload="false" accept="image/*" :on-change="uploadHandle">
            <img v-if="form.pic" :src="form.pic" class="pro-img">
            <i v-else class="upload-btn iconfont icon-shangchuan"></i>
            <template #tip>
              <p class="upload-tip font-12"><span class="font-12">*</span>上传产品图片</p>
              <p class="upload-tip font-12">(大小不超过5MB)</p>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="form.name" type="text" maxlength="32" />
        </el-form-item>
        <el-form-item label="英文名称" prop="english_name">
          <el-input v-model="form.english_name" type="text" maxlength="32" />
        </el-form-item>
        <el-form-item label="产品类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in data.proTypeList" :key="item.value" :label="item.name"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.type == 1" label="电商平台" prop="platform_name">
          <el-select v-model="form.platform_name" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in data.eCommerceList" :key="item.value" :label="item.name"
              :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品链接" prop="link">
          <el-input v-model="form.link" type="text" maxlength="32" />
        </el-form-item>
        <el-form-item v-if="form.type === 1" label="产品售价" prop="product_price">
          <el-input v-model="form.product_price" type="text" maxlength="32" />
        </el-form-item>
        <div class="btns flex">
          <p class="font-14 pointer" @click="close">取消</p>
          <p class="font-14 pointer" @click="submitForm(ruleFormRef)">确定</p>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted } from 'vue';
import data from '@/js/data.js';
import api from '@/api/index';
import { ElMessage, ElLoading } from 'element-plus';

const props = defineProps(['id']);
const emit = defineEmits(['close', 'change']);

const rules = {
  pic: [
    { required: true, message: '请上传产品图片', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入产品名称', trigger: 'blur' }
  ],
  english_name: [
    { required: true, message: '请输入英文名称', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择产品类型', trigger: 'blur' }
  ],
  platform_name: [
    { required: true, message: '请选择电商平台', trigger: 'blur' }
  ],
  link: [
    { required: true, message: '请输入产品链接', trigger: 'blur' }
  ],
  product_price: [
    { required: true, message: '请输入产品售价', trigger: 'blur' }
  ]
};

const form = ref({});
const ruleFormRef = ref();

const close = () => {
  emit('close', null);
}
const uploadHandle = e => {
  if (e.raw.type.search('image') === -1) {
    ElMessage.error('请上传图片');
    return
  }
  if (e.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不大于5MB');
    return
  }
  let formData = new FormData();
  formData.append('file', e.raw);
  formData.append('type', 1);
  const loadingInstance = ElLoading.service({
    fullscreen: false,
    text: '上传中...'
  });
  api.base.uploadFile(formData).then(res => {
    form.value.pic = res.fullPath;
    loadingInstance.close();
  }).catch(() => {
    loadingInstance.close();
  });
}
const submitForm = async formEl => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const loadingInstance = ElLoading.service({
        fullscreen: false,
        text: '提交中...'
      });
      const options = { ...form.value };
      let currentApi;
      if (props.id) {
        options.productId = props.id;
        currentApi = api.pro.updateProduct;
      } else {
        currentApi = api.pro.addProduct;
      }
      currentApi(options).then(() => {
        loadingInstance.close();
        emit('change');
      }).catch(err => {
        loadingInstance.close();
        ElMessage.error(err.msg);
      });
    } else {
      console.log('error submit!', fields)
    }
  })
}
const queryProductDetail = () => {
  api.pro.queryProductDetail({
    productId: props.id
  }).then(res => {
    form.value = {
      ...res,
      english_name: res.englishName,
      platform_name: res.platformName,
      product_price: res.productPrice
    };
  });
}

onMounted(() => {
  if (props.id) {
    queryProductDetail();
  }
});
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: relative;
    width: 390px;
    border-radius: 10px;
    background: #fff;

    .rule-form {
      padding: 16px 24px;

      &::v-deep {
        .el-form-item__content {
          margin-bottom: 18px;
        }

        input {
          height: 32px;
        }

        textarea {
          height: 90px;
        }

        .el-upload {
          width: 72px;
          height: 72px;
          margin-bottom: 10px;
          border: 1px solid #ff5277;
          border-radius: 2px;
        }
      }

      .pro-img {
        width: 100%;
        height: 100%;
      }

      .form-img {
        &::v-deep {

          .el-form-item__content,
          .el-form-item__content div {
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }
      }

      .upload-btn {
        color: @main-color;
        font-size: 26px;
      }

      .upload-tip {
        text-align: center;
        color: #666;
        margin-bottom: 6px;
        line-height: 1;

        span {
          color: @main-color;
        }
      }

      .btns {
        justify-content: end;
        margin-top: 25px;

        p {
          transition: .1s;
          padding: 10px 20px;
          border-radius: 4px;
          margin-left: 10px;

          &:last-child {
            color: #fff;
            background-color: #ff5277;
            border-color: #ff5277;

            &:hover {
              background: #ff7592;
              border-color: #ff7592;
              color: #fff;
            }
          }

          &:first-child {
            border: 1px solid #dcdfe6;
            color: #606266;

            &:hover {
              color: @main-color;
              border-color: #ffcbd6;
              background-color: #ffeef1;
            }
          }
        }
      }
    }
  }
}
</style>
